<template>
  <div class="sp-card">
    <router-link target="_blank" :to="'/spselect?id='+product.ProductDataID">
      <div class="sp-img">
        <img v-lazy="src" width="100%" height="100%" />
        <!-- <el-image :src="img.src" width="100%" heigth="100%" lazy></el-image> -->
      </div>
      <div class="name">{{product.ProductName}}</div>
      <div class="price">￥{{product.PriceSell}}</div>
      <el-row>
        <el-col :span="12" class="txt-l">市场价：￥{{product.PriceMarket}}</el-col>
        <el-col :span="12" class="txt-r">销量：{{product.TotalSell+product.SellBase}}</el-col>
      </el-row>
    </router-link>
  </div>
</template>

<script>
export default {
  props: {
    urlBase: { type: String, default: "" },
    product: { type: Object }
  },
  created() {
    let pd = this.$props.product;
    this.src =
      this.$props.urlBase +
      "/product/" +
      pd.ProductDataID +
      "/3/" +
      pd.FileName;
  },
  data() {
    return {
      src: ""
    };
  }
};
</script>

<style lang="scss" scoped>

.sp-card {
  border: 1px solid rgb(250, 250, 250);
  font-size: 19px;
  padding: 8px;
}

.sp-card .sp-img {
  border-radius: 4px;
  padding: 12px;
  // cursor: pointer;
  // transition: width 2s, height 2s;
  transition: padding 0.6s
}

.sp-card .price {
  color: red;  
}
.sp-card .name {
  height: 20px;
  font-size:13px;
  font-weight:500;
  overflow: hidden;
  text-overflow	:ellipsis;
  white-space:nowrap; 
}
.sp-card .txt-r,.sp-card .txt-l{
  font-size:14px;
  color:#AAA;
}
.sp-card .txt-r{
  text-align: right;
}
.sp-card:hover {  
  border: 1px solid rgb(187, 187, 187);
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  .sp-img{
    padding: 0px;
  }
}
</style>